<template>
  <div>
    <el-table
      v-show="isShow"
      ref="order-table"
      :data="tableData"
      @sort-change="tableSortChange"
      show-summary
      :summary-method="getSummaries"
      border
    >
      <el-table-column label="ID" width="60" align="left">
        <template slot-scope="scope">{{(scope.$index + 1) + (current_page - 1) * per_page}}</template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        align="left"
        prop="order_number"
        :show-overflow-tooltip="true"
        sortable="custom"
        min-width="170"
      ></el-table-column>
      <el-table-column
        min-width="100"
        label="代理人"
        align="left"
        prop="agent"
        sortable="custom"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.agent">{{scope.row.agent.name}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        min-width="110"
        label="流程人员"
        align="left"
        prop="process"
        sortable="custom"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.process">{{scope.row.process.name}}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        label="等待接单(天)"
        align="left"
        sortable="custom"
        prop="agent_order_taking"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            :class="{'unfinish': scope.row.consumer_time.agent_order_taking > 2}"
          >{{scope.row.consumer_time.agent_order_taking | dayFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="160"
        label="代理人撰写(天)"
        align="left"
        sortable="custom"
        prop="order_writing"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            :class="{'unfinish': scope.row.consumer_time.order_writing > 25}"
          >{{scope.row.consumer_time.order_writing | dayFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        label="案件质控(天)"
        align="left"
        sortable="custom"
        prop="order_quality"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.consumer_time.order_quality | dayFilter}}</template>
      </el-table-column>
      <el-table-column
        width="170"
        label="发送定稿文件(天)"
        align="left"
        sortable="custom"
        prop="agent_send_final"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            :class="{'unfinish': scope.row.consumer_time.agent_send_final > 3}"
          >{{scope.row.consumer_time.agent_send_final | dayFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="160"
        label="发明人定稿(天)"
        align="left"
        sortable="custom"
        prop="inventor_confirm_final"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            :class="{'unfinish': scope.row.consumer_time.inventor_confirm_final > 2}"
          >{{scope.row.consumer_time.inventor_confirm_final | dayFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="140"
        label="案件上传(天)"
        align="left"
        sortable="custom"
        prop="order_upload"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            :class="{'unfinish': scope.row.consumer_time.order_upload > 3}"
          >{{scope.row.consumer_time.order_upload | dayFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="130"
        label="总耗时(天)"
        align="left"
        prop="consumer_time_total"
        :show-overflow-tooltip="true"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span
            :class="{'unfinish': scope.row.consumer_time.process_take_time > 35}"
          >{{scope.row.consumer_time.process_take_time | dayFilter}}</span>
        </template>
      </el-table-column>
      <el-table-column
        width="160"
        label="案件提交时间"
        align="left"
        prop="created_at"
        sortable="custom"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        width="160"
        label="定稿时间"
        align="left"
        prop="finish_at"
        sortable="custom"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">{{scope.row.finish_at || '-'}}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      isShow: true,
      tableData: [],
      per_page: 25,
      current_page: 1,
      total: 0,
      tableSum: {},
      tableAvg: {}
    };
  },
  props: {

    // tableData: {
    //   type: Array,
    //   default: () => []
    // },
    // per_page: {
    //   type: Number,
    //   default: 25
    // },
    // current_page: {
    //   type: Number,
    //   default: 1
    // }
  },
  created() {
    this.getTableData();
    this.getAllAgent();
  },
  methods: {
    getSum(data) {
      let sum =
        data.agent_order_taking +
        data.order_writing +
        data.order_quality +
        data.agent_send_final +
        data.inventor_confirm_final +
        data.order_upload;
      sum = Math.floor(sum * 100) / 100;
      return sum;
    },
    tableSortChange(column) {
      this.sort_params = {
        sort_str: column.prop
      };
      if (column.order == "ascending") {
        this.sort_params.sort_order = "asc";
      } else if (column.order == "descending") {
        this.sort_params.sort_order = "desc";
      } else {
        this.sort_params = {};
      }
      this.getTableData();
    },
    getTableData(args) {
      let params = {
        page: this.current_page,
        perPage: this.per_page
      };
      params = { ...params, ...this.sort_params,};
      if (args) {
        params = { ...params, ...args };
      }
      this.loading = true;
      this.$axios
        .get("/api/order/order_consumer_time", {
          params: params
        })
        .then(res => {
          if (res.data.code == 200) {
            this.loading = false;
            this.tableData = res.data.data;
            this.tableAvg = res.data.avg;
            this.total = res.data.page.total;
            this.$emit("totalChange", this.total);
          } else {
            this.loading = false;
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        });
    },
    getAllAgent() {
      this.$axios
        .get("api/user/agent")
        .then(res => {
          if (res.data.code == 200) {
            this.agentOptions = res.data.data;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });

      this.$axios
        .get("api/user/process")
        .then(res => {
          if (res.data.code == 200) {
            let arr = res.data.data;
            this.processOptions = res.data.data;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });
    },
    // // 表格末尾合计
    getSummaries(param) {
      // console.log(param)
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "平均耗时(天)";
          return;
        }
        if (column.label === "等待接单(天)") {
          sums[index] = this.tableAvg.agent_order_taking;
        }
        if (column.label === "代理人撰写(天)") {
          sums[index] = this.tableAvg.order_writing;
        }
        if (column.label === "案件质控(天)") {
          sums[index] = this.tableAvg.order_quality;
        }
        if (column.label === "发送定稿文件(天)") {
          sums[index] = this.tableAvg.agent_send_final;
        }
        if (column.label === "发明人定稿(天)") {
          sums[index] = this.tableAvg.inventor_confirm_final;
        }
        if (column.label === "案件上传(天)") {
          sums[index] = this.tableAvg.order_upload;
        }
        if (column.label === "总耗时(天)") {
          sums[index] = this.tableAvg.process_take_time;
          // sums[index] = 0
          // for (const key in this.tableAvg) {
          //     sums[index] += this.tableAvg[key]
          // }
          // sums[index] = sums[index].toFixed(2)
        }
      });
      return sums;
    }
  }
};
</script>

<style lang='less' type='text/css'>
.el-table__footer-wrapper {
  .el-table__footer {
    div {
      font-weight: 700;
    }
  }
}
</style>
